import React from 'react';
import style from './MyNoteListItem.module.scss'
import {timestampToTime} from "../../utils/dateTimeUtlis";
import {setViewAndComment} from "../../api/publicApi";
import {useNavigate} from "react-router-dom";
import {Image, message} from "antd";
import {fallback} from "../../publicFIle/backupData";

function MyNoteListItem(props) {
    const Navigate = useNavigate()

    const goToMyNotes = () => {
        Navigate('/HomePage/BlogArticle?id=' + props.item.id)
        setViewAndComment({blogId: props.item.id, setType: '1'}).catch(e => {
            message.error('浏览量异常')
        })
    }
    const imgUrl = props.item.blogCoverImage || fallback
    return (
        <div className={style.MyNoteListItem} onClick={goToMyNotes}>
            <div className={style.leftImg}>
                <Image
                    width={'100%'}
                    height={'100%'}
                    src={imgUrl}
                    fallback={fallback}
                    preview={false}
                />
            </div>
            <div className={style.rightText}>
                <div className={style.rightTextTitle}>
                    <p>{props.item.blogTitle}</p>
                </div>
                <div className={style.rightTextType}>
                    <p>{props.item.blogTypeNameK}</p>
                </div>
                <div className={style.rightTextIcon}>
                    <div>
                        <i className="iconfont icon-shijian" style={{color: '#96EBE2', margin: '0.1rem'}}></i>
                        <span>{timestampToTime(new Date(props.item.blogReleaseDate).getTime())}</span>
                    </div>
                    <div>
                        <i className="iconfont icon-pinglun-copy-copy" style={{color: '#FFD666', margin: '0.1rem'}}></i>
                        <span>{props.item.blogCommentNumber}</span>
                    </div>
                    <div>
                        <i className="iconfont icon-lliulan" style={{color: '#1890FF', margin: '0.1rem'}}></i>
                        <span>{props.item.blogPageView}</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default MyNoteListItem;
